<template>
	<div id="three_container"></div>
</template>

<script setup>
import * as THREE from "three";
import { AxesHelper } from "./case/helper/AxesHelper";
import { CameraHelper } from "./case/helper/CameraHelper";
import { WebGLRenderer } from "./create/renderer";
import { OrbitControlsHelper } from "./case/helper/OrbitControls";
import { PerspectiveCamera } from "./create/camera";
import { onMounted } from "vue";

//场景
const scene = new THREE.Scene();
AxesHelper(THREE, scene);
onMounted(() => {
	let container = document.getElementById("three_container");

	const camera = PerspectiveCamera(
		THREE,
		90,
		container.offsetWidth / container.offsetHeight,
		0.1,
		1000
	);
	camera.position.z = 200;
	CameraHelper(THREE, scene, camera);
	const renderer = WebGLRenderer(THREE, container);
	OrbitControlsHelper(THREE, scene, camera, renderer);
	function animate() {
		requestAnimationFrame(animate);
		renderer.render(scene, camera);
	}
	animate();
});
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
</style>
